<template>
  <fieldset>
    <legend>列表页</legend>
    <!-- 目前的传参方式,页面和页面 -->
    <!-- 1.params动态路由参数 -->
    <!-- 2.query传参 -->
    <!-- 这两个参数都会被目标页面的$route对象接收 $route.params $route.query -->
    <router-link v-for="item in newGoods" :key="item._id" :to="{path:`/detail/${item.productId}`,query:{imgSrc:item.imgSrc}}">
      <div>
        <img :src="item.imgSrc" height="50" alt="" />
        <b>{{item.productName}}</b>
      </div>
    </router-link>
  </fieldset>
</template>
<script>
export default {
  name: "list",
  data() {
    return {
      goods: [],
    };
  },
  computed: {
    newGoods() {
      let regExp = /(?<=imgurl=)[^'"]*/; //处理图片地址的正则
      return this.goods.map((item) => {
        let r = regExp.exec(item.productImg2);
        // console.log(r[0]);
        let imgSrc = r[0]; //通过正则把图片的地址匹配出来了
        return { ...item, imgSrc };
      });
    },
  },
  created() {
    //1.发起请求,请求商品列表数据 赋值给goods这个属性
    fetch("http://chst.vip:1234/api/getmoneyctrl")
      .then((body) => body.json())
      .then((res) => {
        console.log(res);
        this.goods = res.result;
      });
  },
};
</script>
